
<template>
  <div
    class="context-menu"
    ref="contextMenu"
    @blur="onClose"
    tabindex="-1"
  >
    <div v-for="(item, idx) in data" :key="idx">
      <div class="context-menu__item" @click="clickFunc(item)">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name: 'MenuContext'
})
</script>
<script setup lang="ts">
import { computed, onMounted, unref, ref, nextTick } from "vue"
const props = defineProps({
    data: { default: null },
    onClose: { type: Function, default: () => {} }
})
// 创建组件ref
const contextMenu: any = ref(null)
onMounted(async () => {
    // 确保组件已经渲染
    await nextTick()
    // 触发组件focus
    contextMenu.value.focus()
})

const clickFunc = (item: any) => {
    console.log(item.type)
    if (item.fn) {
      item.fn()
    }
    props.onClose()
}
</script>
<style lang="scss">
  @import './MenuContext.scss';
</style>